﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyQuestionPage.aspx.cs" Inherits="UI.QuestionSet.MyQuestionPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我的问卷</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://js.40017.cn/touch/cn/public/jquery-1.8.3.min.js"></script>
    <link href="../public/list.css" rel="stylesheet" />
</head>
    <style  type="text/css">
        .list_check {
            height: 32px;
            line-height: 32px;
            padding-top: 12px;
        }

        .list_tab {
            float: left;
            overflow: hidden;
            border: 1px solid #dcdcdc;
            border-radius: 4px;
            behavior: url(/static/css/PIE.htc);
        }

            .list_tab a {
                display: inline-block;
                width: 36px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border-left: 1px solid #dcdcdc;
                float: left;
                margin-left: -1px;
                background: #fff;
            }

                .list_tab a i {
                    display: inline-block;
                    width: 13px;
                    margin-top: 9px;
                    height: 13px;
                }

                    .list_tab a i.box_icon {
                        background: url(../public/image/cq_icon.png) no-repeat -1px -1px;
                    }

                    .list_tab a i.list_icon {
                        background: url(../public/image/cq_icon.png) no-repeat -16px -1px;
                    }

                .list_tab a:hover i.box_icon, .list_tab a.active i.box_icon {
                    background: url(../public/image/cq_icon.png) no-repeat -1px -16px;
                }

                .list_tab a:hover i.list_icon, .list_tab a.active i.list_icon {
                    background: url(../public/image/cq_icon.png) no-repeat -16px -16px;
                }
    </style>
<body>
<div id="app">
<el-form :inline="true" :model="serChInfo" class="demo-form-inline">
        <el-form-item>
            <div class="list_tab">
<a href="javascript:;" class=""><i class="box_icon"></i></a>
<a href="javascript:;" class=""><i class="list_icon"></i></a>
</div></el-form-item> 
    <el-form-item>
            <el-input v-model="serChInfo.serId" placeholder="流水号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="serChInfo.name" placeholder="问卷名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-select v-model="serChInfo.attribute" placeholder="所属模块">
                <el-option label="研发" value="研发"></el-option>
                <el-option label="健康项目部" value="健康项目部"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-date-picker v-model="serChInfo.date" type="date" placeholder="选择日期" >
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetList">查询</el-button>
            <el-button type="primary" @click="AddQuestion">新增</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="requestData.tableData" style="width: 100%">
        <el-table-column v-for="item in requestData.tableHead"  :prop="item.prop" :label="item.label" :width="item.width">
        </el-table-column>
        <el-table-column inline-template :context="_self"   label="操作" width="200">
                  <span>
                    <el-button type="text" size="small" @click="handlePreview($index, row)">预览</el-button>
                    <el-button type="text" size="small" @click="handleEdit($index, row)">编辑</el-button>
                  </span>
        </el-table-column>
    </el-table>
    
    
    <div class="listBox hzBox" style="width: 1212px; margin: 0px auto; display: block;">
        <ul class="clearfix ul_list" id="listHz" style="width: 1236px; margin-left: -20px;">
            <li class="create" oldid="null" style="margin-left: 20px;">
                <a href="/new/"><i></i>新建</a>
            </li>
            <li class="hz survey"  style="margin-left: 20px;"><i class="icon">问卷</i>
            <a href="javascript:;" class="bt" title="1111">1111</a><span class="edit_time">8天前</span>
        <div class="state clearfix"><span class="closed_icon"><i></i>未发布</span><em><span id="rspd_count_586f010da320fc6aee054a1a">0</span> 份数据</em></div>
        <div class="operate_bar" type="问卷">
            <a class="hz_ico ico_edit ico_edit_0" data-name="编辑问卷" pid="586f010da320fc6aee054a1a"><i class="ico"></i></a>
            <a class="hz_ico ico_collect" data-name="收集数据" pid="586f010da320fc6aee054a1a"><i class="ico"></i></a>
            <a class="hz_ico ico_analysis" data-name="数据报表" pid="586f010da320fc6aee054a1a"><i class="ico"></i></a>
            <a class="hz_ico ico_more" pid="586f010da320fc6aee054a1a" fid="51dd234e9b9fbe6646bf4dd3" short_id="viIzQjw" data-title="1111" data-plugin="" data-typeen="survey"><i class="ico"></i></a>
        </div>

    </li>
    <li class="hz survey" oid="586f095ea320fc6d8a8e7d19" oldid="null" style="margin-left: 20px;"><i class="icon">问卷</i>  
        <a href="javascript:;" class="bt" title="啦啦啦">啦啦啦</a><span class="edit_time">8天前</span>
        <div class="state clearfix"><span class="closed_icon"><i></i>未发布</span><em>
            <span id="rspd_count_586f095ea320fc6d8a8e7d19">0</span> 份数据
        </em>
        </div>
        <div class="operate_bar" type="问卷">
            <a class="hz_ico ico_edit ico_edit_0" data-name="编辑问卷" pid="586f095ea320fc6d8a8e7d19"><i class="ico"></i></a>
            <a class="hz_ico ico_collect" data-name="收集数据" pid="586f095ea320fc6d8a8e7d19"><i class="ico"></i></a>
            <a class="hz_ico ico_analysis" data-name="数据报表" pid="586f095ea320fc6d8a8e7d19"><i class="ico"></i></a>
            <a class="hz_ico ico_more" pid="586f095ea320fc6d8a8e7d19" fid="51dd234e9b9fbe6646bf4dcf" short_id="Z3MBR3" data-title="啦啦啦" data-plugin="" data-typeen="survey"><i class="ico"></i></a>
        </div>

    </li>
</ul>
</div>

    <div class="block" style="float: right;margin-right: 50px;margin-top: 5px;">
        <el-pagination layout="total, prev, pager, next,jumper" :total="requestData.totalNum"  :current-page="currPage"
                       @current-change="handleClick" >
        </el-pagination>
    </div>
    

    </div>
</body>
</html>
<script>


    Vue.component('my-Card', {
        template: [
 '<div class="listBox hzBox" style="width: 1212px; margin: 0px auto; display: block;">',                                                                                                              
 '       <ul class="clearfix ul_list" id="listHz" style="width: 1236px; margin-left: -20px;">                                                                                                                           ',
 '           <li class="create" oldid="null" style="margin-left: 20px;">                                                                                                                                                ',
 '               <a href="/new/"><i></i>新建</a>                                                                                                                                                                        ',
 '           </li>                                                                                                                                                                                                      ',                                                                                                                                                                                                             ',
 +'          <li  v-for=" item in mode.questions" class="hz survey" oid="586f095ea320fc6d8a8e7d19" oldid="null" style="margin-left: 20px;"><i class="icon">{{item.Title}}</i>                                                                                       ',
 '                  <a href="javascript:;" class="bt" title=""></a>' +
 '                  <span class="edit_time">8天前</span>                                                                                                       ',
 '                  <div class="state clearfix"><span class="closed_icon"><i></i>未发布</span>' +
 '                      <em>                                                                                                                                  ',
 '                      <span id="">0</span> 份数据                                                                                                                                              ',
 '                      </em>                                                                                                                                                                                                          ',
 '                  </div>                                                                                                                                                                                                         ',
 '                  <div class="operate_bar" type="问卷">                                                                                                                                                                          ',
 '                      <a class="hz_ico ico_edit ico_edit_0" data-name="编辑问卷" pid="586f095ea320fc6d8a8e7d19"><i class="ico"></i></a>                                                                                           ',
 '                      <a class="hz_ico ico_collect" data-name="收集数据" pid="586f095ea320fc6d8a8e7d19"><i class="ico"></i></a>                                                                                                   ',
 '                      <a class="hz_ico ico_analysis" data-name="数据报表" pid="586f095ea320fc6d8a8e7d19"><i class="ico"></i></a>                                                                                                  ',
 '                      <a class="hz_ico ico_more" pid="586f095ea320fc6d8a8e7d19" fid="51dd234e9b9fbe6646bf4dcf" short_id="Z3MBR3" data-title="啦啦啦" data-plugin="" data-typeen="survey"><i class="ico"></i></a>                  ',
 '                  </div>                                                                                                                                                                                                         ',
 '   </li>                                                                                                                                                                                                              '
        ].join(""),
        props: ["model"],
        data: function() {
            return {
                addDays: 0,
        }
        }
    })

    var vm = new Vue({
        el: '#app',
        methods: {
            GetList: function () {
                var that = this;
                $.ajax({
                    type: "get",
                    url: "AjaxCall.ashx",
                    data: {
                        'pageSize': this.pageSize,
                        'pageIndex': this.currPage,//当前分页的页面索引
                        'serChInfo': this.serChInfo, //查询条件
                        'actionName': 'GetList',//方法名称
                    },
                    dataType: 'json',
                    success: function (data) {
                        //alert(msg)
                        that.requestData = data;
                    },
                    error: function (msg) {
                        alert("网络错误，请重新尝试！");
                    }
                });
            },
            onSubmit: function () {
                //console.log('submit!');
                this.GetList();
            },

            handleClick: function (val) {
                var that = this;
                that.currPage = val;
                this.GetList();
            },
            handlePreview: function (index, row) {
                alert("正在预览" + row.serId);

            },
            handleEdit: function (index, row) {
                alert("正在编辑" + row.serId);
            },
            AddQuestion: function () {
                window.open('edit', "_blank", "location=no, width=550, height=500");
            }
        },
        data: {
            pageSize: 10,
            menuPageIndex: "2",
            serChInfo: {
                serId: '',
                name: "",
                attribute: '',
                addUser: '',
                date: "",
            },
            currPage: 1,
            requestData: {
                totalNum: 2,
                maxId: 0,
                tableHead: [
                    {
                        prop: "serId",
                        label: "问卷流水号",
                        width: 180
                    },
                    {
                        prop: "name",
                        label: "问卷名称",
                        width: 300
                    },
                    {
                        prop: "attribute",
                        label: "所属模块",
                        width: 120
                    },
                    {
                        prop: "addUser",
                        label: "创建人",
                        width: 120
                    },
                    {
                        prop: "date",
                        label: "创建日期",
                        width: 150
                    },
                ],
                tableData: [

                ]
            }
        },
        ready: function () {
            GetList();
        }
    });
</script>
